Hola, estoy enfrentando este error, la pregunta es ¿cómo pasar correctamente el índice en este componente?
Error:
react-jsx-dev-runtime.development.js:117 Warning: Each child in a list should have a unique "key" prop.Aquí está el fragmento de código del componente:
{calculatorScreenshots.map((imgUrl: any, index) => { return ( <Zoom> {props.projectName == 'Calculator' && ( <CardMedia key={index} component="img" height="200" alt="project picture" image={imgUrl} /> )} </Zoom> ); })}El componente <Zoom> de nivel superior también necesita un atributo key .
Deberías colocar el accesorio clave en el primer elemento .
{calculatorScreenshots.map((imgUrl: any, index) => { return ( <Zoom key={index}> {props.projectName == 'Calculator' && ( <CardMedia component="img" height="200" alt="project picture" image={imgUrl} /> )} </Zoom> ); })}Debe agregar accesorios key al elemento que representa con map() .
Las teclas ayudan a React a identificar qué elementos han cambiado, se agregaron o se eliminaron. Se deben dar claves a los elementos dentro de la matriz para dar a los elementos una identidad estable
En su caso, olvidó agregar una key={imgUrl} al elemento <Zoom></Zoom> mientras que es el primer elemento representado con map()
Para desactivar esta advertencia, aquí la solución:
{calculatorScreenshots.map((imgUrl: String, index) => { return ( <Zoom key={imageUrl}> {props.projectName == 'Calculator' && ( <CardMedia component="img" height="200" alt="project picture" image={imgUrl} /> )} </Zoom> )})} Ya casi había llegado, simplemente colocó los accesorios key para el segundo elemento mapeado, no para el primero <Zoom></Zoom> .
Codificación feliz 🖖
Algunas buenas piezas de información:
La mejor manera de elegir una clave es usar una cadena que identifique de forma única un elemento de la lista entre sus hermanos. La mayoría de las veces usaría identificaciones de sus datos como claves
Cuando no tiene ID estables para los elementos representados, puede usar el índice de elementos como clave como último recurso.
No recomendamos usar índices para claves si el orden de los elementos puede cambiar. Esto puede tener un impacto negativo en el rendimiento y puede causar problemas con el estado del componente. Consulte el artículo de Robin Pokorny para obtener una explicación detallada sobre los impactos negativos del uso de un índice como clave. Si elige no asignar una clave explícita a los elementos de la lista, React usará de forma predeterminada los índices como claves.
Puedes encontrar más información aquí :